<template>
  <div class="cards">
    <div class="title">对公信息变更</div>
    <div style="height:40px;line-height: 40px;background: #eee;font-size: 14px">以下为您经办的账号，请点击需要变更的账号</div>
    <ul>
      <li v-for="card in cards" @click="selectCard">
        <div>{{card.no}}</div>
        <div>{{card.level}}</div>
        <div>{{card.bank}}</div>
      </li>
    </ul>
    <!--<button id="nextStep">-->
      <!--下一步-->
    <!--</button>-->
  </div>
</template>

<script>
  export default {
    name: "cards",
    data() {
      return {
        cards: [{
          no: "622522545552155",
          level: "基本户",
          bank: "分行1"
        }, {
          no: "622522545552155",
          level: "基本户",
          bank: "分行1"
        }]
      }
    },
    methods: {
      selectCard(){
        this.$router.push({path:"/formpage",query:{}})
      }
    }
  }
</script>

<style scoped lang="less">
  .cards {
    ul {
      padding: 0 10px;
      margin: 0;
      list-style-type: none;
      li {
        display: flex;
        flex: 7;
        height: 50px;
        align-items: center;
        border-bottom: 1px solid #ddd;
        > div:first-child {
          flex: 3;
        }
        > div:nth-child(2) {
          flex: 2;
        }
        > div:last-child {
          flex: 2;
        }
      }
    }
  }
</style>

